import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'upgrade_logic.dart';

class UpgradePage extends StatelessWidget {
  UpgradePage({super.key});

  final logic = Get.put(UpgradeLogic());
  final state = Get
      .find<UpgradeLogic>()
      .state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.firmware_upgrade.ts,
          style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
      ),
      body: GetBuilder<UpgradeLogic>(builder: (logic) {
        return Column(
          children: [
            Container(
              width: 1.sw,
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: 127.h),
              child: Image(
                width: 498.w,
                height: 498.w,
                image: const AssetImage(
                    "assets/images/device/icon_upgrade.png"),
              ),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(42.w, 60.h, 42.w, 0),
              padding: EdgeInsets.fromLTRB(62.w, 50.h, 56.w, 50.h),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(state.upgradable
                      ? LocaleKeys.firmware_new_version.ts
                      : LocaleKeys.firmware_newest_version_now.ts,
                      style: TextStyle(
                        fontSize: 54.sp, color: ColorConst.btnFontColor,)),
                  SizedBox(height: 50.h),
                  Text(state.upgradable ? state.upgradeVersion : state.currentVersion, style: TextStyle(
                    fontSize: 54.sp, color: ColorConst.btnFontColor,)),
                ],
              ),
            ),
            Offstage(
              offstage: !logic.isUpgrading(),
              child: Container(
                padding: EdgeInsets.only(left: 42.w, top: 120.h, right: 42.w),
                child: LinearProgressIndicator(
                  borderRadius: BorderRadius.circular(5),
                  minHeight: 20.h,
                  backgroundColor: Colors.grey,
                  valueColor: AlwaysStoppedAnimation(ColorConst.accentColor),
                  value: state.upgradePercent,
                ),
              ),
            ),
            Offstage(
              offstage: !logic.showUpgradeButton(),
              child: Row(
                children: [
                  Expanded(
                      child: Container(
                        height: 136.h,
                        margin: EdgeInsets.fromLTRB(42.w, 300.h, 42.w, 80.h),
                        child: ElevatedButton(
                          onPressed: () {
                            Get.back();
                          },
                          style: ButtonStyle(
                              backgroundColor: MaterialStateProperty.all(
                                  const Color(0xFFD2D2D2)),
                              shape: MaterialStateProperty.all(
                                  RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(10)
                                  ))
                          ),
                          child: Text(LocaleKeys.ignore.ts, style: TextStyle(
                            fontSize: 48.sp, color: const Color(0xFF898C8F),),),
                        ),
                      )),
                ],
              ),
            ),
            Offstage(
              offstage: !logic.showUpgradeButton(),
              child: Row(
                children: [
                  Expanded(
                      child: Container(
                        height: 136.h,
                        margin: EdgeInsets.fromLTRB(42.h, 0.h, 42.h, 0),
                        child: ElevatedButton(
                          onPressed: () {
                            logic.doUpgrade();
                          },
                          style: ButtonStyle(
                              backgroundColor: MaterialStateProperty.all(
                                  ColorConst.activeColor),
                              shape: MaterialStateProperty.all(
                                  RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(10)
                                  ))
                          ),
                          child: Text(LocaleKeys.upgrade.ts, style: TextStyle(
                            fontSize: 48.sp, color: Colors.white,),),
                        ),
                      )),
                ],
              ),
            )
          ],
        );
      }),
    );
  }
}
